<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>登录</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />

		<link rel="stylesheet" href="static/css/amazeui.css" />
		<link href="static/css/dlstyle.css" rel="stylesheet" type="text/css">
		<link rel="stylesheet" href="static/css/bootstrap.min.css" />
	</head>

	<body>

		<div class="login-boxtitle" style="height: 100px;">
			<div class="logoBig">
				<img src="static/images/logo.png" style="margin-left: 0px ; height: 100px;">
			</div>
		</div>

		<div class="login-banner">
			<div class="login-main" >
				<div class="login-banner-bg"><span></span><img src="static/images/big.jpg" /></div>
				<div class="login-box" style="margin-top: 20px;" id="container1">

					<h3 class="title">登录商城</h3>
					<h5 :style="colorStyle" id="tips"> {{ tips }} </h5>
					<div class="clear"></div>

					<div class="login-form"  style="background: none; margin-top: 15px;">
						<form>
							<div class="user-name"  style="margin-top: 20px;">
								<label for="user"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></label>
								<input type="text" name="" id="user" v-model="username" placeholder="邮箱/手机/用户名" @keyup="checkInfo">
							</div>
							<div class="user-pass"  style="margin-top: 20px;">
								<label for="password"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></label>
								<input type="password" name="" id="password" v-model="password" placeholder="请输入密码" @keyup="checkInfo">
							</div>
						</form>
					</div>

					<div class="login-links" >
						<label for="remember-me"><input id="remember-me" type="checkbox">记住密码</label>
						<a href="#" class="am-fr">忘记密码</a>
						<br />
					</div>
					<div class="am-cf">
						<input type="submit" id="submitBtn" @click="doSubmit" value="登录" class="am-btn am-btn-primary am-btn-sm">
					</div>
					<div class="am-cf">
						<input type="button" onclick="javascript:window.location.href='register.html'" value="注 册" class="am-btn am-btn-default am-btn-sm">
					</div>
					<div class="partner">

					</div>

				</div>
			</div>
		</div>

		<div class="footer ">
			<div class="footer-hd ">

			</div>
			<div class="footer-bd ">
				<p>
					<a href="#">联系我们</a>
					<a href="#">网站地图</a>
				</p>
			</div>
		</div>

		<script type="text/javascript" src="static/js/jquery-1.9.min.js"></script>
		<script type="text/javascript" src="static/js/cookie-utils.js"></script>
		<script type="text/javascript" src="static/js/vue.js"></script>
    <script type="text/javascript" src="static/js/axios.min.js"></script>
    <script type="text/javascript" src="static/js/utils.js"></script>
    <script type="text/javascript" src="static/js/base.js"></script>

    <script type="text/javascript">
      var baseUrl = "http://localhost:8080";
      const vm = new Vue({
        el: "#container1",
        data() {
          return {
            username: "",
            password: "",
            tips: "",
            colorStyle: "color: red",
            isRight: false,
            returnUrl: null,
            pid: 0,
            sid: 0,
            num: 1
          }
        },
        methods: {
          doSubmit() {
            if (this.isRight) {
              axios.get("static/hook/login/login-success.json").then(res => {
                // res.data 才表示返回的数据
                var vo = res.data
                console.log(vo)
                if (vo.code == 10000) {
                  // 如果登录成功，就把token存储到cookie中
                  setCookieValue("token", vo.msg)
                  //将用户昵称和用户头像的路径保存在cookie中
                  setCookieValue("username", vo.data.username)
                  setCookieValue("userImg", vo.data.userImg)
                  setCookieValue("userId", vo.data.userId)

                  if (this.returnUrl == null) {
                    window.location.href = "index.html"
                  } else {
                    this.returnUrl = this.returnUrl + "?m=" + Math.random()
                    if (this.pid != null) {
                      this.returnUrl = this.returnUrl + "&pid=" + this.pid
                    }
                    if (this.sid != null) {
                      this.returnUrl = this.returnUrl + "&sid=" + this.sid
                    }
                    if (this.num != null) {
                      this.returnUrl = this.returnUrl + "&num=" + this.num
                    }
                    window.location.href = this.returnUrl
                  }
                } else {
                  vm.tips = "登录失败，账号或密码错误！"
                }
              })
            } else {
              this.tips = "账号或密码错误！"
            }
          },
          checkInfo() {
            if (this.username == "") {
              this.tips = "请输入账号！"
              this.isRight = false
            } else if (this.username.length < 8 || this.username.length > 20) {
              this.tips = "账号长度必须为8-20个字符"
              this.isRight = false
            } else {
              // 账号合法, 校验密码
              if (this.password == "") {
                this.tips = "请输入密码！"
                this.isRight = false
              } else if (this.password.length < 6 || this.password.length > 16) {
                this.tips = "密码长度必须为6-16个字符"
                this.isRight = false
              } else {
                this.tips = ""
                this.isRight = true
              }
            }
          }
        },
        created() {
          //1.当从商品详情页跳转到登录页面的时候，获取并显示提示信息（url）
          this.tips = getUrlParam("tips")

          //2.获取到回调信息 returnUrl, pid, sid
          this.returnUrl = getUrlParam("returnUrl")
          this.pid = getUrlParam("pid")
          this.sid = getUrlParam("sid")
          this.num = getUrlParam("num")
          /*console.log(this.returnUrl)
          console.log(this.pid)
          console.log(this.sid)*/
        }
      })

		</script>
	</body>

</html>
